<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link rel="shortcut icon" href="/public/img/favicon.ico" type="image/x-icon" />
  <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="/public/css/login.css">
</head>

<body>
  <div class="main">
    <div class="header">
      <h1>用户注册</h1>
    </div>

    <div class="alert alert-danger" role="alert">
      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
      <span class="err_message">{{ err_message }}</span>
    </div>

    <form id="register_form" method="post" action="/register">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" class="form-control" id="username" name="username" value="{{ form && form.username }}" placeholder="字母数字下划线不超过12位" autofocus="true">
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" class="form-control" id="password" name="password" placeholder="字母数字至少4位不超过12位">
      </div>
      <div class="form-group">
        <label for="password2">确认密码</label>
        <input type="password" class="form-control" id="password2" name="password2" placeholder="再次输入密码">
      </div>
      <button type="submit" class="btn btn-success btn-block">注册</button>
    </form>

    <div class="message">
      <p>已有账号? <a href="/login">点击登录</a>.</p>
    </div>
  </div>
</body>

<script>
  var err = document.querySelector('.err_message')
  var errDiv = document.querySelector('.alert-danger')
  if (err.innerText != '') {
    errDiv.style.display = 'block'
  }
</script>

</html>